<template>
	<div :style="{ backgroundColor: modelData.bgColor }" v-if="couponList.length">
		<ul class="coupon-ul" v-if="modelData.rowNum === 3">
			<li v-for="(item, index) in couponList" :key="index" class="coupon-li" :style="{ width: 100 / modelData.rowNum + '%' }">
				<div class="coupon-in coupon-in-three" @click="getCoupon(item.id)">
					<div class="coupon-two-price">
						<span style="font-size: 24rpx;font-weight: 400">¥</span>
						{{ Number(item.reducePrice) }}
					</div>
					<div class="coupon-term" v-if="Number(item.minPrice)">商品满{{ Number(item.minPrice) }}元可用</div>
					<div class="coupon-term" v-else>无使用门槛</div>
				</div>
			</li>
		</ul>
		<ul class="coupon-ul" v-if="modelData.rowNum === 2">
			<li v-for="(item, index) in couponList" :key="index" class="coupon-li " :style="{ width: 100 / modelData.rowNum + '%' }">
				<div class="coupon-in coupon-in-two" @click="getCoupon(item.id)">
					<div class="coupon-two-price">
						<span style="font-size: 24rpx;font-weight: 400">¥</span>
						{{ Number(item.reducePrice) }}
					</div>
					<div class="coupon-term" v-if="Number(item.minPrice)">商品满{{ Number(item.minPrice) }}元可用</div>
					<div class="coupon-term" v-else>无使用门槛</div>
				</div>
			</li>
		</ul>
		<ourLoading isFullScreen :active="isLoding" text="loading..." />
	</div>
</template>

<script>
export default {
	name: 'CouponGroup',
	props: {
		modelData: {
			type: Object,
			default: () => {
				return {
					rowNum:2
				};
			}
		},
		couponList: {
			type: Array,
			default: () => {
				return [
					{
						reducePrice:100,
						minPrice:10
					},
					{
						reducePrice:200,
						minPrice:30
					}
				];
			}
		}
	},
	methods: {
		// 点击领取优惠券
		async getCoupon(id) {
			this.$u.api.receiveCoupon(id).then(res => {
				this.$api.mag('领取成功');
			});
		},
		
	}
};
</script>

<style scoped>
.coupon-ul {
	padding-top: 20upx;
	padding-right: 20upx;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
}

.coupon-in {
	background: url('../../../static/img/home_coupon_two_bg.png');
	background-size: 100% 100%;
	margin-left: 20upx;
	font-size: 24upx;
	margin-bottom: 20upx;
	color: #fd463e;
	text-align: center;
}
.coupon-in-three {
	background: url('../../../static/img/home_coupon_three_bg.png');
	background-size: 100% 100%;
}
.coupon-two-price {
	font-size: 44upx;
	font-weight: 500;
	padding-top: 12upx;
}
.coupon-two-price:after {
	content: '';
	display: block;
	width: 200upx;
	height: 8upx;
	border-bottom: 1px dashed #fd463e;
	margin: 0 auto;
}
.coupon-in-three .coupon-two-price {
	font-size: 40upx;
}
.coupon-in-three .coupon-two-price:after {
	width: 120upx;
}
.coupon-term {
	font-size: 20upx;
	font-weight: 300;
	padding: 10upx 0 20upx;
}
</style>
